<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style  lang="scss">
html, body, #app {height: 100%;}
$header-height: 55px;
$dialog-header-height: 38px;
$main-padding: 8px;
$font-size: 12px;
$menu-font-size: 13px;
$main-min-width: 1336px;
$main-min-height: 665px;
$side-width: 200px;
$elDialogFooterHeight: 46px;
$buttonColor : #F78040;
$contentHeight : calc(100vh - #{$header-height} - #{$main-padding} - #{$main-padding});
$mainHeight : calc(100vh - #{$header-height} - #{$main-padding} - #{$main-padding} - 2px);
$menuBackgroundColor : #409EFF;
$elDialogHeaderBackgroundColor : #409EFF;
$elDialogHeaderHeight: calc(#{$header-height} - 6px);
$dialogHeight: calc(#{$elDialogFooterHeight} - 8px);
$elDialogHeight : calc(90vh - #{$header-height});
$font-size-tab: 13px;
@keyframes dialogAnimation
{
  0% {
    transform: translate3d(2000px, 0, 0);
  }
  60% {
    /*  opacity: 1;不透明*/
    transform: translate3d(0px, 0, 0);
  }
  75% {
    transform: translate3d(0px, 0, 0);
  }
  90% {
    transform: translate3d(0px, 0, 0);
  }
  100% {
    transform: none;
  }
}
.el-tooltip__popper {
  max-width: 75%;
}
.el-form-item--small .el-form-item__error {
  padding-top: 0px !important;
}
.el-message {
  z-index: 2000 !important;
}
.v-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .1;
}
.tox-tinymce-aux {
  z-index: 9999 !important;
}
.zZindex {
  z-index:3000 !important;
}
#app {
  .el-form-item__label {
    font-size: 12px !important;
  }
  .el-tabs__header {
    margin: 0 0 5px !important;
  }
  .el-tabs--border-card>.el-tabs__content {
    padding: 1px !important;
  }
  main {
    padding-left:  $side-width!important;
  }
  .mianpageHeight {
    height: $mainHeight;
  }
  .panel {
    background-color: #FFFFFF;
  }
  .el-pagination {
    height: 55px;
    margin-top:1px;
    padding: 0px 5px;
  }
  .el-dialog .el-pagination {
    height: 24px;
    margin-top:3px;
  }
  .el-date-editor--datetimerange.el-input__inner {
    width: 330px;
  }
  .listOperation {
    padding-left: 5px;
    padding-bottom: 5px;
    .el-button {
      margin-left: 2px;
      margin-top: 5px;
    }
  }
  .el-upload--picture-card {
    width: 108px !important;
    height: 108px !important;
    line-height: 108px !important;
  }
  .el-upload-list--picture-card .el-upload-list__item {
    width: 108px !important;
    height: 108px !important;
  }
  .link {
    color: #3a8ee6;
    text-decoration: #3a8ee6 underline;
    curor: pointer;
  }

  .my-dialog-center{
    .el-dialog__header{
      position: fixed;
      background-color: $elDialogHeaderBackgroundColor !important;
      border-left: $elDialogHeaderBackgroundColor solid 1px !important;
      text-align: left;
      height: $dialogHeight;
      padding: 2px !important;
      color: white;
      .el-dialog__title{
        color: white;
        font-size: $menu-font-size;
        font-weight: 500;
        letter-spacing: 6px;
        line-height: $dialogHeight;
        margin-left: 20px;
      }
      .el-dialog__headerbtn {
        top:8px;
      }
    }
  }
  .el-card__body {
    padding: 15px 10px 0px 20px !important;
  }
  .transferDialog.scroll-y .el-dialog__body{
    overflow-y: auto;
  }
  .el-card {
    border: 2px solid #EBEEF5 !important;
  }
  .tiny-mce-dialog{
    .el-dialog--center .el-dialog__body {
      text-align: initial;
      padding: 10px 10px 15px;
    }
    .el-dialog__header{
      background-color: $elDialogHeaderBackgroundColor;
      border-left: $elDialogHeaderBackgroundColor solid 1px;
      // text-align: left;
      height: $dialogHeight;
      padding: 2px !important;
      color: white;
      .el-dialog__title {
        color: white;
        font-size: $menu-font-size;
        font-weight: 500;
        letter-spacing: 6px;
        line-height: $dialogHeight;
        margin-left: 10px;
      }
      .el-dialog__headerbtn {
        top:8px;
      }
    }
  }
  .transferDialog{
    /*box-shadow: -5px 3px 6px #dfdfe0;*/
    // height: 90% !important;
    /*top: calc(#{$header-height} - 1px) !important;*/
    animation: dialogAnimation .0s;
    /*left: auto;*/
    overflow: hidden !important;
    .el-dialog{
      /*height: 50%;*/
      width: 100%;
      /*margin-top: 50px !important;*/
    }
    .el-dialog__body {
      padding: 10px 5px;
      height: calc(#{$elDialogHeight} - #{$elDialogHeaderHeight} - #{$elDialogFooterHeight} - 100px);
      //height: calc(#{$elDialogHeight} - #{$elDialogHeaderHeight} - 100px);
      .vue-scroll {
        .vuescroll-vertical-scrollbar {
          background: #dfe0e3!important;
        }
        .vuescroll-horizontal-scrollbar {
          background: #dfe0e3!important;
        }
      }
    }
    .el-dialog__footer {
      .el-button {
        margin-right: 10px;
      }
    }
    .el-dialog__header{
      background-color: $elDialogHeaderBackgroundColor;
      border-left: $elDialogHeaderBackgroundColor solid 1px;
      // text-align: left;
      height: $dialogHeight;
      padding: 2px !important;
      color: white;
      .el-dialog__title {
        color: white;
        font-size: $menu-font-size;
        font-weight: 500;
        letter-spacing: 6px;
        line-height: $dialogHeight;
        margin-left: 20px;
      }
      .el-dialog__headerbtn {
        top:8px;
      }
    }
  }
  .aptTimeColor {
    .el-input__inner {
      color: orange !important;
    }
  }
}
.transferDialog.scroll-y .el-dialog__body{
  overflow-y: auto;
}
.el-row[data-v-25c3d82c] {
  margin-bottom: 0px !important;
}
.el-dialog {
  padding: 0px;
  .el-dialog__body {
    padding: 10px;
    font-size: $font-size !important;
    .title {
      text-align: center;
    }
  }
  .el-dialog__footer {
    padding: 10px 10px;
  }
  .el-dialog__header{
    text-align: center;
    .el-dialog__title {
      font-size: $font-size !important;
    }
  }
  .el-card__header {
    padding: 10px 20px;
  }
}
.app-container {
  padding: 20px 20px 10px 20px;
}
.search-text {
  font-size:13px;
  font-weight:600;
  color: rgb(58, 58, 58);
  .search-text1{font-size:16px;
    font-weight:700;
    color:red}
  .search-text2{font-size:16px;
    font-weight:700;
    color: #393838
  }
}
.head-container {
  padding-bottom: 4px !important;
}
.search-text1{
  font-weight:700;
  color: #f10707
}
.el-table--small td, .el-table--small th {
  padding: 5px 0 !important;
}
.el-table__footer-wrapper tbody td, .el-table__header-wrapper tbody td {
  background-color: #e6ebf5 !important;
  font-size:15px !important;
  color: #F5222D !important;
}
.dialog-center{
  height: calc(100vh);
}
#app .dialog-center.dialog-scroll-y .el-dialog__body{
  height: calc(#{$elDialogHeight} - #{$elDialogHeaderHeight});
  overflow-y: auto;
}
.el-input-group__append, .el-input-group__prepend {
  padding: 0 10px !important;
}
body {

}

</style>
